<template>
  <div>
    <div class="base gap-row-16">
      <div
        v-for="item in props.items"
        :key="`custom-tab-${item[`${props.itemLabel}`]}`"
        class="tab pointer"
        :class="{ active: modelValue === item[`${props.itemValue}`] }"
        @click="$emit('update:modelValue', item[`${props.itemValue}`])"
      >
        <span class="font-size-16 font-style-normal font-weight-500 line-height-140">
          {{ $t(item[`${props.itemLabel}`]) }}
        </span>
        <div class="index"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 雙向綁定的值
  modelValue: {
    type: Number,
    required: true,
  },
  // 有哪些Tab
  items: {
    type: Array,
    required: true,
  },
  // Tab要顯示的值
  itemValue: {
    type: String,
    default: 'value',
  },
  // Tab要顯示的文字
  itemLabel: {
    type: String,
    default: 'label',
  },
})
const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>

<style lang="scss" scoped>
.base {
  display: flex;
  align-items: flex-start;
  position: relative;
  color: rgb(var(--v-theme-subtitle-x));

  .tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    span {
      white-space: nowrap;
    }

    .index {
      width: 1.25rem;
      height: 2px;
      border-radius: 1rem;
      position: absolute;
      bottom: -0.25rem;
    }

    &.active {
      color: white;
      .index {
        background-color: var(--color-primary-red, #f42c52);
      }
    }
  }
}
</style>
